<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>带导航图标的顶部搜索框</title>
    <style>
        html {
        font: 62.5%/1 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
        }

        body {
        width: 480px;
        margin: 20px auto;
        color: #0b171f;
        background-color: #fff;
        }

        body > header {
        *zoom: 1;
        position: relative;
        color: #fff;
        background-color: #25323d;
        }
        body > header:after {
        content: "";
        display: table;
        clear: both;
        }
        body > header h1 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        margin: 0;
        width: 100%;
        line-height: 60px;
        font-size: 2.4em;
        font-weight: 300;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        }

        .header-button {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-indent: -119988px;
        overflow: hidden;
        text-align: left;
        text-transform: capitalize;
        position: relative;
        z-index: 1;
        display: block;
        width: 60px;
        height: 60px;
        margin: 0;
        padding: 0;
        outline: none;
        background: url("");
        border: none;
        cursor: pointer;
        }

        #toggle-menu {
        float: left;
        background-position: 0 0;
        background-color: #bc0023;
        }

        #toggle-search {
        float: right;
        background-position: -60px 0;
        }
        #toggle-search.open:after {
        top: 40px;
        }
        #toggle-search:after {
        -moz-transition: top, 0.5s;
        -o-transition: top, 0.5s;
        -webkit-transition: top, 0.5s;
        transition: top, 0.5s;
        position: absolute;
        top: 52px;
        left: 50%;
        margin-left: -8px;
        content: "";
        border-color: transparent transparent #e1e4e7;
        border-style: solid;
        border-width: 8px 8px 12px;
        }

        #toggle-basket {
        position: relative;
        float: right;
        background-position: -120px 0;
        }
        #toggle-basket:before {
        position: absolute;
        top: 5px;
        left: 0;
        width: 2px;
        height: 50px;
        content: "";
        background-color: #000;
        }

        #search-form {
        -moz-transition: max-height, 0.5s;
        -o-transition: max-height, 0.5s;
        -webkit-transition: max-height, 0.5s;
        transition: max-height, 0.5s;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background-color: #e1e4e7;
        }
        #search-form.open {
        max-height: 60px;
        }
        #search-form fieldset {
        position: relative;
        margin: 0 60px 0 0;
        padding: 0;
        border: none;
        }
        #search-form input {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        height: 60px;
        }
        #search-form input[type="search"] {
        width: 100%;
        padding: 0 5px 0 22px;
        background: transparent;
        border: none;
        }
        #search-form input[type="submit"] {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        margin: 0;
        padding: 0;
        font-weight: 700;
        text-transform: uppercase;
        color: #516270;
        background: #c6cacd;
        border: none;
        cursor: pointer;
        }

    </style>
</head>
<body inject_svd="true">
    <header>
        <h1>网站首页</h1>
        <button id="toggle-menu" class="header-button">菜单</button>
        <button id="toggle-basket" class="header-button">购物车</button>
        <button id="toggle-search" class="header-button">搜索</button>
        <form id="search-form" action="">
            <fieldset>
                <input name="search-terms" type="search" placeholder="请输入搜索内容">
            </fieldset>
            <input type="submit" value="确定">
        </form>
    </header>
    <div class="main"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    (function($) {
        // Handle click on toggle search button
        $('#toggle-search').click(function() {
            $('#search-form, #toggle-search').toggleClass('open');
            return false;
        });

        // Handle click on search submit button
        $('#search-form input[type=submit]').click(function() {
            $('#search-form, #toggle-search').toggleClass('open');
            return true;
        });

        // Clicking outside the search form closes it
        $(document).click(function(event) {
            var target = $(event.target);
    
            if (!target.is('#toggle-search') && !target.closest('#search-form').size()) {
                $('#search-form, #toggle-search').removeClass('open');
            }
        });
    })(jQuery);
    </script>
    <div id="popupMenu"></div>
</body>

</html>